<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>47jQuery复制节点的相关方法</title>
        <script src="http://code.jquery.com/jquery-1.12.4.js" 
        integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
        crossorigin="anonymous"></script>
        <script>
            $(function (param) {  
                $("button").eq(0).click(function (param) { 
                    //clone(false)：浅复制
                    //1.浅复制一个元素
                    var $li=$("li:first").clone(false);
                    //2.将复制的元素添加到ul中
                    $("ul").append($li);
                 });
                $("button").eq(1).click(function (param) { 
                    //clone(true)：深复制
                    //1.深复制一个元素
                    var $li=$("li:first").clone(true);
                    //2.将复制的元素添加到ul中
                    $("ul").append($li);
                 });

                 //验证浅复制与深复制的区别
                 //浅复制只会复制元素，不会复制元素的事件
                 $("li").click(function (param) {  
                     alert($(this).html());
                 });
            });
        </script>
    </head>
    <body>
        <button>浅复制节点</button>
        <button>深复制节点</button>
        <ul>
            <li>我是第1个li</li>
            <li>我是第2个li</li>
            <li>我是第3个li</li>
        </ul>
    </body>
</html>